<template>
  <div class="hello">
    <h1>欢迎来到XBoot前后端分离开发平台单点登录测试站点</h1>
    <h1>sso.exrick.cn</h1>

    <div v-if="login">
      <h3>当前登录用户信息</h3>
      <br />
      <Avatar :src="userInfo.avatar" size="large" />
      <br />
      <br />
      <p>用户名：{{userInfo.username}}</p>
      <Button @click="logout" type="primary" style="margin-top:10px;margin-right:10px;">退出登录测试</Button>
      <a href="http://xboot.exrick.cn/login" target="_blank">
        <Button style="margin-top:10px;">返回主站点</Button>
      </a>
    </div>

    <div v-else>
      <h3>
        您还未登录，请先去主站点
        <a href="http://xboot.exrick.cn/login" target="_blank">xboot.exrick.cn</a> 登录
        <br />登录成功后刷新该页面重试
      </h3>

      <a href="http://xboot.exrick.cn/login" target="_blank">
        <Button type="primary" style="margin-top:10px;">去主站点登录</Button>
      </a>
      <Button style="margin-top:10px;margin-left:10px;" @click="init">刷新</Button>
    </div>

    <h3>XBoot完整版获取</h3>
    <ul>本站源码可通过XBoot完整版获取</ul>
    <a href="http://xpay.exrick.cn/pay?xboot" target="_blank">
      <Button type="error" style="margin-top:10px;">立即获取完整版</Button>
    </a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3>
      By:
      <a href="http://exrick.cn" target="_blank">Exrick</a>
    </h3>

    <Modal
      v-model="modal"
      title="Common Modal dialog box title"
      @on-ok="ok"
      footer-hide
      width="620"
      :styles="{top: '230px'}"
      @on-cancel="cancel"
    >
      <p slot="header" style="border: none !important"></p>
      <div class="wrap">
        <div class="title" style>快速安全登录</div>
        <div class="tips">
          检测到您的账号已在其他站点登录，
          <br />点击头像直接授权登录。
        </div>
        <div class="avatar" @click="confirmLogin" v-if="!loading">
          <img :src="data.avatar" class="img" />
          <span class="img_out_focus"></span>
        </div>
        <div style="position:absolute;top:30px;">
          <RectLoading v-if="loading" />
        </div>

        <span class="nick" @click="confirmLogin" v-if="!loading">{{data.username}}</span>
        <div class="bottom">
          <a href="http://xboot.exrick.cn/regist" class="link" target="_blank">注册新帐号</a>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import RectLoading from "./rect-loading";
export default {
  name: "HelloWorld",
  components: {
    RectLoading
  },
  data() {
    return {
      loading: false,
      login: false,
      modal: false,
      data: {},
      userInfo: {}
    };
  },
  methods: {
    init() {
      let accessToken = Cookies.get("accessToken");
      if (accessToken) {
        this.setStore("accessToken", accessToken);
        this.loading = true;
        this.getRequest("/user/info").then(res => {
          let that = this;
          this.loading = false;
          if (res.success) {
            this.data = res.result;
          }
        });
        this.modal = true;
      } else {
        this.$Message.warning("未检测到主站点登录用户");
      }
    },
    confirmLogin() {
      this.login = true;
      this.userInfo = this.data;
      this.modal = false;
    },
    logout() {
      this.$Modal.info({
        title: "退出登录测试方法",
        content: "您可以返回主站点退出登陆后，刷新本页面观察登录状态"
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.wrap {
  min-height: 287px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 20px;
  color: #333;
  margin-bottom: 16px;
}

.tips {
  color: #666;
  font-size: 16px;
  text-align: center;
  margin-bottom: 36px;
}

.avatar {
  position: relative;
  cursor: pointer;
}

.img {
  width: 80px;
  height: 80px;
  margin-left: 4px;
  margin-top: 4px;
  margin-bottom: 10px;
}

.nick {
  margin-bottom: 40px;
  cursor: pointer;
}

.img_out_focus {
  width: 88px;
  height: 88px;
  position: absolute;
  top: 0;
  left: 0;
  background: url() -91px -183px
    no-repeat;
}

.bottom {
  .link {
    right: 20px;
    bottom: 13px;
    position: absolute;
    color: #666;
  }
}

h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
// a {
//   color: #42b983;
// }
</style>
